<template>
  <div id="test-page" class="flex">
    <!-- 左侧列表 -->
    <div class="content-left">
      <div class="left-btns flex">
        <p class="font-weight">滚动配置</p>
        <div>
          <el-button @click="deleteDialogVisible = true">删除</el-button>
          <el-button @click="applyDialogVisible = true">应用</el-button>
          <el-button @click="disapplyDialogVisible = true">冻结</el-button>
        </div>
      </div>
      <div class="data-list">
        <div
          v-for="(item, index) in listData"
          :key="index"
          class="data-item pointer"
          :class="{ 'current-item': clickItemIndex === index }"
          @click="clickItem(item, index)"
        >
          <span>{{ item.version }}</span>
          <i
            v-show="item.apply"
            class="el-icon-success"
            style="color:green;font-size: 16px;"
          ></i>
          <i
            v-show="!item.apply"
            class="el-icon-error"
            style="color:red;font-size: 16px;"
          ></i>
        </div>
      </div>
    </div>
    <!-- 右侧表单 -->
    <div class="content-right">
      <div class="left-btns flex">
        <p class="font-weight">配置详情</p>
      </div>
      <div class="form-content">
        <el-form
          ref="form"
          class="test"
          :inline="true"
          label-position="left"
          :model="form"
          size="mini"
        >
          <el-form-item label="配置 ID">
            <el-input v-model="form.id" :disabled="isHaveData" />
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="form.publish_time" :disabled="isHaveData" />
          </el-form-item>
          <el-form-item label="修改时间">
            <el-input v-model="form.modify_time" :disabled="isHaveData" />
          </el-form-item>
          <el-form-item label="版本">
            <el-input v-model="form.version" spellcheck="false" />
          </el-form-item>
          <el-form-item label="应用状态" style="margin-right: 50px;">
            <el-switch
              v-model="form.apply"
              active-color="#13ce66"
              :disabled="isHaveData"
              inactive-color="#cccccc"
            />
          </el-form-item>
          <el-form-item label="暂停主动防御" label-width="100px">
            <el-switch
              v-model="form.unprotect"
              active-color="#13ce66"
              inactive-color="#cccccc"
            />
          </el-form-item>
          <div class="update-device">
            <div class="font-weight">更新器</div>
            <el-form-item class="test" label="程序下载地址" label-width="100px">
              <el-col :span="24">
                <el-input v-model="form.updater_url" spellcheck="false" />
              </el-col>
            </el-form-item>
            <el-form-item label="签名下载地址" label-width="100px">
              <el-input v-model="form.updater_sig_url" spellcheck="false" />
            </el-form-item>
            <el-form-item label="MD5" label-width="100px">
              <el-input v-model="form.updater_md5" spellcheck="false" />
            </el-form-item>
          </div>
          <div class="update-device">
            <div class="font-weight">资源包</div>
            <el-form-item label="包存储名称" label-width="100px">
              <el-input v-model="form.mpkg_name" spellcheck="false" />
            </el-form-item>
            <el-form-item label="下载地址" label-width="100px">
              <el-input
                v-model="form.mpkg_url"
                spellcheck="false"
                style="width: 80%;"
              />
            </el-form-item>
            <el-form-item label="MD5" label-width="100px">
              <el-input v-model="form.mpkg_md5" spellcheck="false" />
            </el-form-item>
          </div>
        </el-form>
        <div class="end-btns">
          <el-button @click="addDialogVisible = true">新建</el-button>
          <el-button @click="updateDialogVisible = true">保存</el-button>
        </div>
      </div>
    </div>
    <!-- 确认添加的弹窗 -->
    <el-dialog title="提示" :visible.sync="addDialogVisible" width="30%">
      <span>您确定将该配置详情添加为新的更新配置吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="rollingCreate(form)">确定</el-button>
      </span>
    </el-dialog>
    <!-- 确认修改的弹窗 -->
    <el-dialog title="提示" :visible.sync="updateDialogVisible" width="30%">
      <span>您确定将该配置详情修改并保存为当前更新配置吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="rollingUpdate(form)">确定</el-button>
      </span>
    </el-dialog>
    <!-- 确认删除的弹窗 -->
    <el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%">
      <span
        >删除配置后，将影响到全局客户端的更新配置。您确定删除该更新配置吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="rollingDelete">确定</el-button>
      </span>
    </el-dialog>
    <!-- 确认应用的弹窗 -->
    <el-dialog title="提示" :visible.sync="applyDialogVisible" width="30%">
      <span
        >应用配置后，将影响到全局客户端的更新配置。您确定应用该更新配置吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="applyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="rollingApply">确定</el-button>
      </span>
    </el-dialog>
    <!-- 确认应用的弹窗 -->
    <el-dialog title="提示" :visible.sync="disapplyDialogVisible" width="30%">
      <span
        >冻结配置后，将影响到全局客户端的更新配置。您确定冻结该更新配置吗？</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="disapplyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="rollingDisapply">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRollingList,
  getDetailById,
  rollingCreate,
  rollingUpdate,
  rollingDelete,
  rollingApply,
  rollingDisapply
} from "@/api/setting/rolling.js";
export default {
  data() {
    return {
      clickItemIndex: 0,
      listData: [],
      form: {}, //表单对象
      isHaveData: false, //表单是否有数据
      addDialogVisible: false, //添加弹窗的显示与否
      updateDialogVisible: false, //修改保存弹窗的显示与否
      deleteDialogVisible: false, //删除弹窗的显示与否
      applyDialogVisible: false, //确定应用弹窗的显示与否
      disapplyDialogVisible: false //确定禁用弹窗的显示与否
    };
  },
  created() {
    this.getRollingList();
  },
  methods: {
    // 获取数据列表
    async getRollingList() {
      let res = await getRollingList();
      if (res.data.code == 200) {
        this.listData = res.data.update_list;
        this.clickItem(
          res.data.update_list[this.clickItemIndex],
          this.clickItemIndex
        );
      } else {
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
    },
    async clickItem(item, index) {
      this.clickItemIndex = index;
      let query = {
        id: item.id
      };
      let res = await getDetailById(query);
      if (res.data.code == 200) {
        this.form = res.data.update;
        this.isHaveData = true;
      } else {
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
    },
    // 创建配置新数据
    async rollingCreate(form) {
      let query = {
        version: form.version,
        unprotect: form.unprotect,
        updater_url: form.updater_url,
        updater_sig_url: form.updater_sig_url,
        updater_md5: form.updater_md5,
        mpkg_name: form.mpkg_name,
        mpkg_url: form.mpkg_url,
        mpkg_md5: form.mpkg_md5
      };
      let res = await rollingCreate(query);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success"
        });
      } else {
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
      this.addDialogVisible = false;
      this.getRollingList();
    },
    async rollingUpdate(form) {
      let query = {
        id: form.id,
        version: form.version,
        unprotect: form.unprotect,
        updater_url: form.updater_url,
        updater_sig_url: form.updater_sig_url,
        updater_md5: form.updater_md5,
        mpkg_name: form.mpkg_name,
        mpkg_url: form.mpkg_url,
        mpkg_md5: form.mpkg_md5
      };
      let res = await rollingUpdate(query);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success"
        });
        this.updateDialogVisible = false;
        this.getRollingList();
      } else {
        this.updateDialogVisible = false;
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
    },
    // 确认删除
    async rollingDelete() {
      let query = {
        id: this.form.id
      };
      let res = await rollingDelete(query);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success"
        });
        this.deleteDialogVisible = false;
        this.getRollingList();
      } else {
        this.deleteDialogVisible = false;
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
    },
    // 确认应用
    async rollingApply() {
      let query = {
        id: this.form.id
      };
      let res = await rollingApply(query);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success"
        });
        this.applyDialogVisible = false;
        this.getRollingList();
      } else {
        this.applyDialogVisible = false;
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
    },
    // 确认应用
    async rollingDisapply() {
      let query = {
        id: this.form.id
      };
      let res = await rollingDisapply(query);
      if (res.data.code == 200) {
        this.$message({
          message: res.data.message,
          type: "success"
        });
        this.disapplyDialogVisible = false;
        this.getRollingList();
      } else {
        this.disapplyDialogVisible = false;
        this.$message({
          message: res.data.message,
          type: "warning"
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
@import "@/assets/css/style.scss";

::v-deep .el-form-item__content {
  flex: unset;
  width: 90% !important;
}

#test-page {
  .font-weight {
    font-weight: 700;
  }

  .pointer {
    cursor: pointer;
  }

  div {
    box-sizing: border-box;
  }

  background-color: #fff;

  .content-left {
    width: 30%;

    .left-btns {
      padding: 20px 20px 0;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
    }

    .data-list {
      padding: 10px 10px 20px 20px;
      background-color: rgb(245, 245, 245);
      // height: 100%;
      height: calc(100vh - 61px + 41px);

      .data-item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        padding: 10px;
        border: 2px solid #666666;
        border-radius: 5px;

        i {
          margin-top: 2px;
        }

        &:hover {
          background-color: rgb(197, 197, 197);
        }
      }

      .current-item {
        background-color: rgb(197, 197, 197);
      }
    }
  }

  .content-right {
    padding: 20px 20px 20px 30px;
    width: 70%;

    .form-content {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .update-device {
      border: 2px solid #999999;
      margin-bottom: 5px;
      padding: 10px 10px;
      border-radius: 5px;

      .el-form-item {
        margin-bottom: 10px !important;
        display: block;
        display: flex;
        width: 90% !important;

        .el-form-item__content {
          width: 100% !important;
          background-color: pink;
        }
      }
    }

    .end-btns {
      margin-top: 10px;
    }
  }
}
</style>
